<template>
  <div class="media-input">
    <div class="tabs">
      <div
        class="tab"
        :class="{ active: type === tab.key }"
        v-for="tab in tabs"
        :key="tab.key"
        @click="type = tab.key"
      >
        {{ tab.label }}
      </div>
    </div>

    <template v-if="type === 'webpage'">
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
         
        "
      >
        <el-form :model="form" ref="ruleFormRef" :rules="rules" style="width: 100%;">
          <el-form-item prop="src" label="网页地址:">
            <el-input
              v-model="form.src"
              style="width:90%"
            />
          </el-form-item>
        </el-form>
      </div>

      <div class="btns">
        <Button @click="emit('close')" style="margin-right: 10px">取消</Button>
        <Button type="primary" @click="insertWebpage()">确认</Button>
      </div>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref,reactive } from "vue";
import OSS from "ali-oss";
import { sourceMaterial } from "@/api/facility/index";
import { Button, Input, message } from "ant-design-vue";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import { sourceMaterialPage } from "@/api/facility";
const imageUrl = ref("");
const ruleFormRef = ref<FormInstance>()
var form = reactive({
  src: "http://"
});
const checked1 = ref<any[]>([]);

const infoVisible = ref(false);
type TypeKey = "webpage" | "audio" | "image";
interface TabItem {
  key: TypeKey;
  label: string;
}
import type { UploadProps, UploadUserFile,FormRules } from "element-plus";
const fileList = ref([]);
const uploadList = ref([]);
const formData = ref({});
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const hovered = ref(true); // 鼠标是否移入
const selectimg = ref("");
var types = ref<any>();
const srcList: any = [];
const validateUrl = (rule, value, callback) => {

  const pattern = /^((ht|f)tps?):\/\/([\w\-]+(\.[\w\-]+)*\/)*[\w\-]+(\.[\w\-]+)*\/?(\?([\w\-\.,@?^=%&:\/~\+#]*)+)?/
  if (pattern.test(value)) {
    callback();
  } else {
    callback(new Error("请输入合法的网址"));
  }
};
const rules = reactive<FormRules>({
  src: [
    { required: true, message: "请填写网址", trigger: "blur" },
    { validator: validateUrl, trigger: "blur" },
  ],
});

const handleAvatarSuccess: UploadProps["onSuccess"] = (
  _response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!);
};
const showInfo = (_hide: any) => {
  infoVisible.value = _hide;
};
const beforeAvatarUpload: UploadProps["beforeUpload"] = (_rawFile) => {
  // if (rawFile.type !== 'image/jpeg') {
  //   ElMessage.error('Avatar picture must be JPG format!')
  //   return false
  // } else if (rawFile.size / 1024 / 1024 > 2) {
  //   ElMessage.error('Avatar picture size can not exceed 2MB!')
  //   return false
  // }
  // return true
};

const emit = defineEmits<{
  (
    event: "insertVideo",
    data: { src: string; fileSize: string; name: string }
  ): void;
  (event: "insertAudio", payload: string): void;
  (event: "close"): void;

  (event: "insertWebpage", payload: string): void;
  (event: "close"): void;
}>();
var pageSize4 = ref(10);
var currentPage4 = ref(1);
var pidss = ref(16);
var total = ref(16);
var listData = ref();

const type = ref<TypeKey>("webpage");

const name = ref("");
const fileSize = ref("");
const tabs: TabItem[] = [{ key: "webpage", label: "网页" }];

const insertWebpage = () => {
  const pattern = /^((ht|f)tps?):\/\/([\w\-]+(\.[\w\-]+)*\/)*[\w\-]+(\.[\w\-]+)*\/?(\?([\w\-\.,@?^=%&:\/~\+#]*)+)?/
  if(!pattern.test(form.src)){
ElMessage.error('"请输入合法的网址"')
  }else{
    emit("insertWebpage", form.src);
  form.src = "http://";
  }

};
</script>

<style lang="scss" scoped>
.el-checkbox__input.is-bordered .el-checkbox__inner {
  border-color: #c0c4cc;
}

.el-checkbox__input.is-checked.is-bordered .el-checkbox__inner {
  background-color: #409eff;
  border-color: #409eff;
}

.el-icon-check {
  font-size: 12px;
  color: #fff;
}
::v-deep .el-checkbox.is-bordered {
  padding: 0 15px 0 9px;
  border: none;
  box-sizing: border-box;
}
::v-deep .el-checkbox__label {
  display: inline-block;
  padding-left: 8px;
  line-height: 1;
  font-size: var(--el-checkbox-font-size);
  display: none;
}
::v-deep .el-radio__inner {
  border-radius: 0;
}
::v-deep .el-radio__input.is-checked .el-radio__inner::after {
  content: "\00a0"; /* 添加一个空格 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffff; /* 勾选标识颜色 */
  border-radius: 50%;
  width: 10px;
  height: 10px;
}
.image-container {
  position: relative;
  width: 150px;
  height: 150px;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: rgba(0, 0, 0, 0.8);
  color: #af1212;
  opacity: 0;
  transition: all 0.3s ease;
}

.selector {
  /* 选择框样式 */
  width: 50px;
  height: 50px;
}

.info {
  /* 图片信息样式 */
  margin: 50% 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #ffff;
}

/* 当鼠标移入时，遮罩层变为不透明 */
.image-container:hover .overlay {
  opacity: 1;
  cursor: pointer;
}
.flex {
  display: flex;

  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-evenly;
}
.hiddn {
  white-space: nowrap; /* 指定文本不换行 */
  overflow: hidden; /* 文本超出容器时隐藏 */
  text-overflow: ellipsis;
}
.media-input {
  width: 880px;
}
.tabs {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid $borderColor;
  margin-bottom: 20px;
}
.tab {
  padding: 0 10px 8px;
  border-bottom: 2px solid transparent;
  cursor: pointer;

  &.active {
    // border-bottom: 2px solid $themeColor;
  }
}
.btns {
  margin-top: 10px;
  text-align: right;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  background: #f6f7f9;
  border-radius: 4px;

  width: 150px;
  height: 150px;
  text-align: center;
}
</style>
